"use client";

import { type PlateElementProps } from "platejs/react";

import { useToggleButton, useToggleButtonState } from "@platejs/toggle/react";
import { ChevronRight } from "lucide-react";
import { PlateElement } from "platejs/react";

import { Button } from "@/components/plate/ui/button";

export function ToggleElement(props: PlateElementProps) {
  const element = props.element;
  const state = useToggleButtonState(element.id as string);
  const { buttonProps, open } = useToggleButton(state);

  return (
    &lt;PlateElement {...props} className="pl-6"&gt;
      &lt;Button
        size="icon"
        variant="ghost"
        className="absolute -left-0.5 top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
        contentEditable={false}
        {...buttonProps}
      &gt;
        &lt;ChevronRight
          className={
            open
              ? "rotate-90 transition-transform duration-75"
              : "rotate-0 transition-transform duration-75"
          }
        /&gt;
      &lt;/Button&gt;
      {props.children}
    &lt;/PlateElement&gt;
  );
}
